<template>
  <div class="my-project" name="myProject">
    <div class="title">
      <span>我的日报</span>
      <div class="add" @click="openDialog">
        <el-icon><Plus /></el-icon>
      </div>
    </div>
    <ul class="project-list" v-if="list.length">
      <el-scrollbar>
        <li v-for="(item, key) in list" :key="key">
          <span>{{ item.gmtModified || item.gmtCreate }}</span>
          <span> 已提交 </span>
        </li>
      </el-scrollbar>
    </ul>
    <el-empty v-else></el-empty>
  </div>
  <div v-if="drawerVisible">
    <Dialog v-model:drawerVisible="drawerVisible" v-model:config="config" @change="handleChange" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { myReportApi, reportAddApi } from "@/api/modules/home";
import { useUserStore } from "@/stores/modules/user";
import { PROJECTIMG } from "@/constants";
import Dialog from "@/components/DialogForm/index.vue";
import { getProjectPage } from "@/api/modules/project";

const userStore = useUserStore();
const userId = computed(() => userStore.userInfo.id);
// 变量
let drawerVisible = ref(false);
let config = ref<any>({ width: 60 });
let projectListParams = ref({
  currentPage: 1,
  pageSize: 1000,
  userId,
  searchKey: ""
});
let projectList = ref([]);
// 查询列表数据
const list = ref([]);
const getTableList = async () => {
  const { data } = await myReportApi({ userId: userId.value });
  list.value = data.slice(-5);
};

// 新增
const openDialog = async () => {
  drawerVisible.value = true;
  drawerVisible.value = true;
  config.value.title = "新增日报";
  config.value.form = {
    formData: {
      id: "",
      userId,
      todayContent: "",
      tomorrowContent: "",
      todayProblem: "",
      remark: "",
      projectId: "",
      reportImgModels: []
    },
    rules: {
      projectId: [{ required: true, message: "请选择项目" }],
      todayContent: [{ required: true, message: "请填写今日工作内容" }],
      tomorrowContent: [{ required: true, message: "请填写明日工作内容" }],
      todayProblem: [{ required: true, message: "请填写今日工作问题" }],
      reportImgModels: [{ required: true, message: "请上传图片" }]
    }
  };
  config.value.column = [
    {
      type: "select",
      key: "projectId",
      formItemAttribute: {
        label: "项目"
      },
      attributes: {
        placeholder: "请选择项目",
        options: projectList.value
      }
    },
    {
      type: "input",
      key: "todayContent",
      formItemAttribute: {
        label: "今日工作事项"
      },
      attributes: {
        placeholder: "请填写今日工作事项",
        type: "textarea"
      }
    },
    {
      type: "input",
      key: "todayProblem",
      formItemAttribute: {
        label: "今日工作问题"
      },
      attributes: {
        placeholder: "请填写今日工作问题",
        type: "textarea"
      }
    },
    {
      type: "input",
      key: "tomorrowContent",
      formItemAttribute: {
        label: "明日工作事项"
      },
      attributes: {
        placeholder: "请填写明日工作事项",
        type: "textarea"
      }
    },

    {
      type: "file",
      key: "reportImgModels",
      formItemAttribute: {
        label: "现场图片"
      },
      attributes: {
        "prefix-data": PROJECTIMG,
        multiple: true,
        showFileList: true,
        limit: 30,
        width: "80px",
        height: "80px",
        type: "image",
        listType: "picture-card",
        fileType: ["image/jpeg", "image/png", "image/gif"]
      }
    }
  ];
  config.value.api = reportAddApi;
  config.value.transformData = data => {
    data.reportImgModels = data.reportImgModels.map(item => {
      return {
        name: item.name,
        originalName: item.originalName,
        path: item.path
      };
    });
    delete data.id;
    return data;
  };
  config.value.sucess;
  config.value.message = "添加成功";
};
// 获取项目列表
const getProjectPageFn = async () => {
  try {
    const { data } = await getProjectPage(projectListParams.value);
    projectList.value = data.records || [];
  } catch (error) {
    console.log(error);
  }
};
const handleChange = () => {
  getTableList();
};

onMounted(() => {
  getTableList();
  getProjectPageFn();
});
</script>
<style scoped lang="scss">
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.my-project {
  padding: 0 0 0 30px;
  background: #ffffff;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    margin-right: 30px;
    line-height: 72px;
  }
  .add {
    cursor: pointer;
  }
  .project-list {
    height: 320px;
    li {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 64px;
      font-size: 14px;
      color: #333333;
      border-bottom: 1px solid #f2f2f2;
      span:last-child {
        margin-right: 30px;
      }
    }
  }
}
</style>
